<template>
  <div class="configHome hover-light" @click="newSurveyData.modifyBatchEdit(false)">
    <svg t="1660695348880" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2357" width="200" height="200"><path d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z" p-id="2358"></path></svg>
    返回
  </div>
  <p class="info">批量编辑小标题</p>
  <div class="input-list">
    <textarea :rows="rows" v-model="inputTextarea" @input="input"></textarea>
  </div>
</template>

<script>
import TextArea from '@/components/TextArea.vue'
import newSurveyData from '@/store/new-survey-data'
import { QUESTION_TYPE_MATRIX_RADIO } from "@/constants/default"

export default {
  components: { TextArea },
  data: () => ({
    newSurveyData: newSurveyData(),
    questions: newSurveyData().questions[newSurveyData().currentOrder],
    inputTextarea: '',
    rows: 1,
  }),
  methods: {
    input() {
      const i = this.newSurveyData.currentOrder
      const list = this.inputTextarea.split('\n')
      this.newSurveyData.questions[i].subTitles = list
      this.rows = list.length
    },
    updateTextarea() {
      const i = this.newSurveyData.currentOrder
      if (i === -1) return
      const type = this.newSurveyData.questions[i].type
      if (type !== QUESTION_TYPE_MATRIX_RADIO) {
        // 小标题只有矩阵单选有, 这里要自己单独关闭, 不然，在批量编辑小标题时，如果切换到下拉、单选、多选，会继续显示在批量编辑小标题
        this.newSurveyData.modifyBatchEdit(false)
        return
      }
      const subTitles = JSON.parse(JSON.stringify(this.newSurveyData.questions[i].subTitles))
      this.inputTextarea = subTitles.join('\n')
      this.rows = subTitles.length
    },
  },
  watch: {
    'newSurveyData.currentOrder': {
      handler() {
        this.updateTextarea()
      },
    },
    'questions.subTitles': {
      handler() {
        this.updateTextarea()
      },
      deep: true,
    },
  },
  mounted() {
    this.updateTextarea()
  },
}
</script>

<style lang="scss">
.configHome {
  height: 30px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  svg {
    width: 20px;
  }
}
.info {
  margin: 10px 0;
}
.input-list {
  border: 1px solid #ddd;
  max-height: 500px;
  overflow: auto;

  textarea {
    padding: 0 4px;
    font-size: 18px;
    line-height: 30px;
    overflow-y: hidden;
    white-space: pre;

    &::-webkit-scrollbar {
      width: 3px;
      height: 3px;
      background-color: transparent;
    }
    &::-webkit-scrollbar-thumb {
      height: 3px;
      background-color: #c3c2c2;
    }
  }
}
</style>
